﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestGraph.aspx.cs" Inherits="HMS.PL.Forms.TestGraph" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.6.1.js"></script>
    <%--  <link type="text/css" rel="stylesheet" href="../themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
   <link type="text/css" href="../themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" />--%>
    <script src="../Scripts/graph/jquery.jqplot.min.js" type="text/javascript" language="javascript"></script>
    <link type="text/css" href="../Scripts/graph/jquery.jqplot.css" rel="stylesheet" />
    <script src="../Scripts/graph/jqplot.pieRenderer.min.js" type="text/javascript" language="javascript"></script>
    <script src="../Scripts/graph/jqplot.donutRenderer.min.js" type="text/javascript"
        language="javascript"></script>
    <script type="text/javascript" src="../Scripts/graph/jqplot.barRenderer.min.js"></script>
    <script type="text/javascript" src="../Scripts/graph/jqplot.categoryAxisRenderer.min.js"></script>
    <script type="text/javascript" src="../Scripts/graph/jqplot.pointLabels.min.js"></script>
    <script type="text/javascript" src="../Scripts/graph/jqplot.canvasTextRenderer.min.js"></script>
    <script type="text/javascript" src="../Scripts/graph/jqplot.canvasAxisTickRenderer.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //for pie chart           
//            var data = [
//                    ['Heavy Industry', 15], ['Retail', 9], ['Light Industry', 14],
//                    ['Out of home', 16], ['Commuting', 7], ['Orientation', 9]
//                  ];


            var data = [
                    ['Alabama', 17], ['Cupertino', 18], ['Denver', 18],
                                    ['Kansas City', 7], ['Los Angeles', 13], ['Ohio', 12],
                       ['Persistance', 12], ['Salt Lake City', 14], ['San Francisco', 6]// ,
//                                    ['San Jose', 14], ['San Mateo', 14], ['Santa Fe', 14],
//                                    ['Santa Monica', 11], ['St. Petersburg', 15], ['Sunnyvale', 15]

                  ];


                var plot1 = jQuery.jqplot('chartdiv', [data],
                {
                    seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer,
                        rendererOptions: {
                            // Put data labels on the pie slices.
                            // By default, labels show the percentage of the slice.
                            showDataLabels: true
                        }
                    },
                    legend: { show: true, location: 'e' },
                    title: 'City In Contacts'
                }
              );


            //for bar chart
//            var s1 = [200, 600, 700, 800];
            var s2 = [460, 210, 690, 820];
            var s3 = [260, 440, 320, 200];
            //Alabama	17
            //Cupertino	18
            //Denver	18
            //Kansas City	7
            //Los Angeles	13
            //Ohio	12
            //Persistance	12
            //Salt Lake City	14
            //San Francisco	6
            //San Jose	14
            //San Mateo	14
            //Santa Fe	14
            //Santa Monica	11
            //St. Petersburg	15
            //Sunnyvale	15
            var cnt = [17, 18, 18, 7,13,12,12,14,6,14,14,14,11,15,15];

            // Can specify a custom tick Array.
            // Ticks should match up one for each y value (category) in the series.
           // var ticks = ['May', 'June', 'July', 'August'];

            var ticks = ['Alabama', 'Cupertino', 'Denver', 'Kansas City', 'Los Angeles', 'Ohio', 'Persistance', 'Salt Lake City', 'San Francisco', 'San Jose', 'San Mateo', 'Santa Fe', 'Santa Monica', 'St. Petersburg', 'Sunnyvale'];

            var plot1 = $.jqplot('bardiv', [cnt], {
                // The "seriesDefaults" option is an options object that will
                // be applied to all series in the chart.
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: { fillToZero: true }
                },
                // Custom labels for the series are specified with the "label"
                // option on the series option.  Here a series option object
                // is specified for each series.
                
                series: [
            { label: 'City'}//,
                //            { label: 'Event Regristration' },
                //            { label: 'Airfare' }
            ],
                // Show the legend and put it outside the grid, but inside the
                // plot container, shrinking the grid to accomodate the legend.
                // A value of "outside" would not shrink the grid and allow
                // the legend to overflow the container.
                legend: {
                    show: true,
                    placement: 'outsideGrid'
                },
                axesDefaults: {
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    tickOptions: {
                        angle: -30,
                        fontSize: '10pt'
                    }
                },
                axes: {
                    // Use a category axis on the x axis and use our custom ticks.
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: ticks
                    },
                    // Pad the y axis just a little so bars can get close to, but
                    // not touch, the grid boundaries.  1.2 is the default padding.
                    yaxis: {
                        pad: 1.05,
                        tickOptions: { formatString: '%d' }
                    }
                }
            });


            // rotated axis

//            var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15],
//  ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3],
//  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];

//            var plot1 = $.jqplot('rotdiv', [line1], {
//                title: 'Concern vs. Occurrance',
//                series: [{ renderer: $.jqplot.BarRenderer}],
//                axesDefaults: {
//                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
//                    tickOptions: {
//                        angle: -30,
//                        fontSize: '10pt'
//                    }
//                },
//                axes: {
//                    xaxis: {
//                        renderer: $.jqplot.CategoryAxisRenderer
//                    }
//                }
//            });
            //

        });
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table>
       <tr><td>City from Contacts</td></tr>
        <tr>
            <td>
                <div id="chartdiv" style="height: 600px; width: 500px;">
                </div>
            </td>
            <td>
                <div id="bardiv" style="height: 400px; width: 600px;"></div>
            </td>
        </tr>
        <tr>
        <td>
        <div id="rotdiv" style="height: 400px; width: 600px;"></div>
        </td>
        </tr>
    </table>
   
    </form>
</body>
</html>
